<template>
    <div class="child-section">
        <buni-header>
            <div class="main">
				<van-overlay :show="isLoading">
				  <div class="empty">
				  	<van-loading type="spinner" color="#1989fa" />
				  </div>
				</van-overlay>
				<div class="module">
					<van-steps :active="active" active-icon="success" active-color="#ff340c">
					  <van-step>融资需求</van-step>
					  <van-step>企业信息</van-step>
					  <van-step>联系人</van-step>
					  <van-step>上传证件</van-step>
					  <van-step>授权书</van-step>
					</van-steps>
				</div>
				<div>
					<van-form @submit="onSubmit"  :scroll-to-error='true' :show-error-message='false' label-width='100px'>
						<!-- 融资需求信息 -->
						<div class="module">
							<h3>融资需求信息</h3>
							<van-field
							  v-model="rzData.xqje"
							  name="xqje"
							  label="需求金额(万元)"
							  required
							  clearable
							  placeholder="请填写需求金额"
							  :rules="[{ required: true, message: '请填写需求金额' }]"
							/>
							
							<van-field
							  readonly
							  clickable
							  required
							  name="dbfs"
							  :value="rzData.dbfs"
							  label="担保方式"
							  placeholder="点击选择担保方式"
							  :rules="[{ required: true, message: '请选择担保方式' }]"
							  @click="showPicker1 = true"
							/>
							<van-popup v-model="showPicker1" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns1"
								@confirm="onConfirm1"
								@cancel="showPicker1 = false"
							  />
							</van-popup>
							
							<van-field
							  readonly
							  clickable
							  required
							  name="rzqx"
							  :value="rzData.rzqx"
							  label="融资期限(个月)"
							  placeholder="点击选择融资期限"
							  :rules="[{ required: true, message: '请选择融资期限' }]"
							  @click="showPicker2 = true"
							/>
							<van-popup v-model="showPicker2" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns2"
								@confirm="onConfirm2"
								@cancel="showPicker2 = false"
							  />
							</van-popup>
							
							<van-field
							  readonly
							  clickable
							  required
							  name="rzyt"
							  :value="rzData.rzyt"
							  label="融资用途"
							  placeholder="点击选择融资用途"
							  :rules="[{ required: true, message: '请选择融资用途' }]"
							  @click="showPicker4 = true"
							/>
							<van-popup v-model="showPicker4" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns4"
								@confirm="onConfirm4"
								@cancel="showPicker4 = false"
							  />
							</van-popup>
							<van-field v-if="rzData.rzyt === lastRzyt" v-model="rzData.qtrzyt" name="qtrzyt"  placeholder="请填写融资用途" required clearable :rules="[{ required: true, message: '请填写融资用途' }]" />
							
							<van-field
							  readonly
							  clickable
							  required
							  name="hkly"
							  :value="rzData.hkly"
							  label="还款来源"
							  placeholder="点击选择还款来源"
							  :rules="[{ required: true, message: '请选择还款来源' }]"
							  @click="showPicker3 = true"
							/>
							<van-popup v-model="showPicker3" position="bottom">
							  <van-picker
								show-toolbar
								:columns="columns3"
								@confirm="onConfirm3"
								@cancel="showPicker3 = false"
							  />
							</van-popup>
							
							<div class="button">
								<van-button round block type="info" native-type="submit">下一步</van-button>
							</div>
						</div>
					</van-form>
				</div>
			</div>
        </buni-header>
    </div>
</template>

<script>
import {dictGrid} from '../../request/api.js'
import buniHeader from "../../components/buniHeader.vue";
import { Toast } from 'vant';
export default {
    name:'financing',
    components: {
        buniHeader
    },
    data() {
        return {
			active:0,
			rzData:{
				xqje:undefined,
				dbfs:undefined,
				rzqx:undefined,
				rzyt:undefined,
				qtrzyt:undefined,
				hkly:undefined,
			},
			lastRzyt:'',
			timer:null,
			isLoading:false,
			showPicker1:false,
			columns1:['抵押','信用'],
			showPicker2:false,
			columns2:['12','24','36'],
			showPicker3:false,
			columns3:['经营收入'],
			showPicker4:false,
			columns4:[],
        }
    },
	created() {
		dictGrid({code:'DKYT'}).then(res=>{
			this.columns4 = res.data.map(item=>item.fieldName)
			let len = res.data.length;
			this.lastRzyt = res.data[len-1].fieldName;
		})
	},
    methods: {
		onConfirm1(val){
			this.rzData.dbfs = val;
			this.showPicker1 = false;
		},
		onConfirm2(val){
			this.rzData.rzqx = val;
			this.showPicker2 = false;
		},
		onConfirm3(val){
			this.rzData.hkly = val;
			this.showPicker3 = false;
		},
		onConfirm4(val){
			this.rzData.rzyt = val;
			if(val !== this.lastRzyt){
				this.rzData.qtrzyt = undefined;
			}
			this.showPicker4 = false;
		},
		onSubmit(){
			this.isLoading = true;
			this.timer = setTimeout(()=>{
				this.isLoading = false;
				this.$router.push({path:"/comInfo"})
			},500)
		},
    },
	beforeDestroy() {
		clearTimeout(this.timer);
	}
}
</script>
<style scoped lang="scss">
.main{
	width: 10rem;
	background: #083bb9;
	padding: 0 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.empty{
		width: 10rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.module{
		width: calc(10rem - 40px);
		padding: 0.133333rem 0.133333rem;
		border-radius: 0.066666rem;
		margin-bottom: 0.133333rem;
		background-color: #fff;
		h3{
			margin: 0.133333rem 0 0.133333rem 0.133333rem;
			font-size: 32px;
		}
		.selection{
			padding: 0 0.346666rem;
			span{
				color: #f00;
			}
		}
		.button{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
}
</style>
<style type="text/css">
.van-radio{
	margin-bottom: 0.133333rem;
}
.van-button{
	margin-top: 0.266666rem !important;
}
</style>